<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script>
        let arrs = [
            {
                "createDate": "2022-01-14",
                "id": 3,
                "img": "https://oa.itany.com/itmupload/1642124626965.jpg",
                "title": "IT人必看！2020 年招聘排名 TOP 10 的技能！",
                "titletext": "IT人必看！2020 年招聘排名 TOP 10 的技能！在当今竞争激烈的环境中，程序员必须不断学习和持续更新硬技能。那么成为一名企业急需的程序员需要学习什么呢？列出了 IT 专业人员在人才竞争中必须具"
            },
            {
                "createDate": "2022-01-14",
                "id": 4,
                "img": "https://oa.itany.com/itmupload/1642124903300.jpg",
                "title": "2020年最新整理-Java面试题大全",
                "titletext": "2020年最新整理-Java面试题大全1. JDK 和 JRE 有什么区别？JDK：Java Development Kit 的简称，java 开发工具包，提供了 java 的开发环境和运行环境。JR"
            },
            {
                "createDate": "2022-01-14",
                "id": 5,
                "title": "你可能不知道的 10 个 HTML 元素",
                "titletext": "我都记不得听到过多少次「HTML 很容易」的说法。尽管我同意，相比其他编程语言，HTML 也许学起来要容易一些，但你不该理所当然地认为它不值一提。HTML 是强大的标记语言，在运用得当的情况下，可以为"
            },
            {
                "createDate": "2022-01-14",
                "id": 6,
                "img": "https://oa.itany.com/itmupload/1642125144470.png",
                "title": "华为“备胎”转正：那些牛逼的人，都有“兜底”的能力",
                "titletext": "2019年5月17日，华为海思总裁给员工的一封信燃爆全网，网友直呼华为“牛逼”。事情起因是这样的：美国政府于当地时间15日，发布针对华为等中国企业的限制交易令，禁止美国企业与华为往来，禁止华为参与政府"
            },
            {
                "createDate": "2022-01-14",
                "id": 7,
                "img": "https://oa.itany.com/itmupload/1642125372907.png",
                "title": "女生转行做IT跟男生有什么不一样？",
                "titletext": "很多漂亮的小姐姐向我们咨询最多的问题就是：女生转行IT有什么困难？是不是很多IT企业都不要女生啊？女生的逻辑不如男生，是不是学不好编程？1. 转行IT有什么困难吗？有，你需要有毅力，你需要能够学进去，"
            },
            {
                "createDate": "2022-01-14",
                "id": 8,
                "img": "https://oa.itany.com/itmupload/1642126205567.jpg",
                "title": "Java和IOS哪个前景好?",
                "titletext": "随着科技化社会的发展，互联网技术行业越来越受到人们的青睐。据权威预测，截止2016年，中国将新增15000家IT企业。IT行业不仅需求量大，而且工资也是很乐观的，就有很多人就开始从事这个行业。到底是选"
            }
        ]
    //    通过JS处理在控制台依据对象内容，将每个对象输出为如下字符串格式
    //     <li>
    //         <h4>title</h4>
    //         <img src="img" alt="" srcset="">
    //         <p>titletext</p>
    //         <p>createDate</p>
    //     </li>
    //     let templateStr = "";
        // for (let i = 0; i < arrs.length; i++) {
        //     templateStr += `<li>
        //         <h4>${ arrs[i].title }</h4>
        //         <img src="${ arrs[i].img }" alt="" srcset="">
        //         <p>${ arrs[i].titletext }</p>
        //         <p>${ arrs[i].createDate }</p>
        //     </li>`
        // }

        // let templateStr = "";
        // arrs.forEach( (item) => {
        //     templateStr += `<li>
        //         <h4>${ item.title }</h4>
        //         <img src="${ item.img }" alt="" srcset="">
        //         <p>${ item.titletext }</p>
        //         <p>${ item.createDate }</p>
        //     </li>`
        // } )

        let templateStr = arrs.map( item => {
           return `<li>
                <h4>${ item.title }</h4>
                <img src="${ item.img }" alt="" srcset="">
                <p>${ item.titletext }</p>
                <p>${ item.createDate }</p>
            </li>`
        } ).join("");

        console.log( templateStr )
    </script>
</head>
<body>

</body>
</html>